import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import router from 'umi/router';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import PageHeader from '@/components/PageHeader';

import { Button, Card, message } from 'antd';

import BasicInfoElem from './components/BasicInfoElem';
import OtherInfoElem from './components/OtherInfoElem';

import '@ant-design/compatible/assets/index.css';

interface saveAndEditProps extends FormComponentProps {
    dispatch: Dispatch;
    dataInfo: any;
    INITINFO: any;
    location: { query: any };
}

interface saveAndEditState {
    formValues: object;
}

@connect(({ courierCompanySaveAndEdit: { dataInfo, anotherInfo }, common }: any) => ({
    dataInfo,
    anotherInfo,
    INITINFO: common.INITINFO,
}))
class saveAndEditInfo extends Component<saveAndEditProps, saveAndEditState> {
    state: saveAndEditState = {
        formValues: {},
    };

    componentDidMount() {
        const { location: { query: { id } } } = this.props;
        if (id) this.fetchDetailInfo(id);
        this.fetchAction('common/fetchAlias');
    }

    componentDidUpdate(prevProps: any) {
        const {
            location: { query: { id } },
        } = this.props;
        if (id && prevProps.location.query.id !== id) {
            this.fetchDetailInfo(id);
        }
    }

    componentWillUnmount() {
        this.fetchAction('clear');
    }

    fetchDetailInfo = (id: number) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'courierCompanySaveAndEdit/fetch',
            payload: { id, loadUser: 1 },
        });
    };

    mergeValues = (name: string, value: number | string | object) => {
        const { formValues } = this.state;
        formValues[name] = value;
        this.setState({ formValues });
    };

    handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        const { formValues } = this.state;
        const {
            form: { validateFieldsAndScroll },
            location: { query },
        } = this.props;

        validateFieldsAndScroll((errors, values) => {
            if (errors) return;
            const params = {
                ...values,
                ...formValues,
                displayArray: values.displayArray.join(),
                scopeArray: values.scopeArray.join(),
            };

            if (params.file === 1) {
                message.error('请上传图片');
            }

            if (params.file && params.file.size > 5120000) {
                message.error('图片文件过大，请重新选择');
            } else {
                if (query.id) {
                    params.id = query.id;
                }
                delete params.fileImg;
                this.fetchAction('saveOrUpdate', params);
            }
        });
    };

    fetchAction = (typeName: string, payload = {}) => {
        const type = typeName.indexOf('common') >= 0
            ? typeName : `courierCompanySaveAndEdit/${typeName}`;

        const { dispatch } = this.props;
        dispatch({ type, payload });
    };

    render() {
        const {
            form,
            dataInfo = {},
            INITINFO: { aliasList },
        } = this.props;

        return (
            <Fragment>
                <PageHeader />

                <Form
                    hideRequiredMark
                    onSubmit={this.handleSubmit}
                    className="tableListForm"
                >
                    <BasicInfoElem
                        forms={form}
                        detailInfo={dataInfo}
                        anotherInfo={aliasList}
                        mergeFun={this.mergeValues.bind(this)}
                    />
                    <OtherInfoElem
                        forms={form}
                        detailInfo={dataInfo}
                    />

                    <Card bordered={false}>
                        <Button
                            type="primary"
                            htmlType="submit"
                        >
                            提交
                        </Button>
                        <Button
                            ghost
                            type="primary"
                            className="marginL16"
                            onClick={() => router.goBack()}
                        >
                            取消
                        </Button>
                    </Card>
                </Form>
            </Fragment>
        );
    }
}

export default Form.create<saveAndEditProps>()(saveAndEditInfo);
